﻿html, body {
    width: 100%;
    height: 100%;
    background-color: gray;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#frame {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#leftPane {
    width: 50%;
    height: 100%; 
    background-color: gray;
    float: left;
    margin: 0px;
    padding: 0px;
}

#rightPane {
    width: 50%;
    height: 100%; 
    background-color: gray;
    float: right;
    margin: 0px;
    padding: 0px;
}

#idCanvas {
    background-color: black;
    margin: 0px;
    padding: 0px;
}

#idDictionaryContainer {
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#idBottomDictionaryToolbar {
    font-size: 12px;
    padding: 2px;
}

#idDictionary {
    /*background-color: darkgray;*/
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-y: scroll;
}

#idCommandLine {
    width: 100%;
    height: 40px;
    margin: 0px;
    padding: 0px;
}

#idCommandLine table {
    height: 100%;   
}

#idCommandLine input {
    border: 1px solid black;
}


#idCommandLine td {
    padding: 5px;
    padding-right: 10px;
    text-align: center;
}

#idEditor {
    width: 100%;
    background-color: gray;
    margin: 0px;
    padding: 0px;
}

#idEditor table {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;    
}

#idEditor table td {
    margin: 0px;
    padding: 0px;    
}

.editorTopToolbar {
}

.editorTextArea {
}


.editorBottomToolbar {
}


#idEditor #idEditorWrapper {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

#idEditor textarea {
    background-color: #feeebd;
    resize: none;
    width:  100%;
    height: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
}

#idEditorEditPane {
    overflow: hidden;
}

#idTopEditorToolbar {
    display: block;
    padding: 2px;
}

#idTopEditorToolbar button {
    font-size: 12px;
    padding: 2px;
}

#idBottomEditorToolbar {
    font-size: 12px;
    padding: 2px;
    text-align: right;
}

#idBottomEditorToolbar button {
    font-size: 12px;
    padding: 2px;
}

#idCommandList .ui-selecting { background: #FECA40; }
#idCommandList .ui-selected { background: #F39814; color: white; }
#idCommandList { list-style-type: none; margin: 0; padding: 0; width: 100%; text-align: center; display: block; }
#idCommandList li {
    margin: 3px;
    padding: 0.4em;
    font-size: 1em;
    height: 16px;
    vertical-align: middle;
    line-height: 16px;
    display: inline-block;
    border: 1px solid black;
    font-weight: bolder;
    text-align: center;
    cursor: default;
    white-space: nowrap;
}

#idMessageBox {
    text-align: center;
}

#idMessage {
    font-weight: bold;
    font-size: x-large;
}

.custom-file {
    float: left;
    position: relative;
    height: 35px;
}
.custom-file #file {
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: 35px;
    opacity: 0;
}
.custom-file #cityFile {
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: 35px;
    opacity: 0;
}

.custom-file span{
    float: left;
    font-size: 16px;
    height: 22px;
}
.custom-file span.text {
    width: 300px;
}
/*.custom-file button.button {
    border:1px solid gray;
}*/

#idKarelToolbar {
    font-size: 11px;
    padding: 1px;
    margin: 0px;
}

#idKarelToolbar  div {
    margin-left: 5px;
    font-size: 16px;
    display: inline-block;
    line-height: 16px;
    vertical-align: middle;
}

#idSpeed {
    display: inline-block;
    width: 150px;
    margin-left: 15px !important;
}

#idCityToolbar {
    font-size: 11px;
    padding: 1px;
    margin: 0px;
}

#idCityToolbar > div {
    display: inline-block;
}

#idEditorViewPane {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: darkgray;
    margin: 0px;
    padding: 0px;
    border: none;
}

#idEditorViewPane pre {
    color: white;
    font-weight: bold;
    font-size: 18px;
}

#idCommandPane {
    width: auto;
    float: left;
    margin: 0px;
    padding: 0px;
    border: none;
}

#idDiagramPane  {
    text-align: center;
    float: right;
    overflow-y: auto;
    margin: 0px;
    padding: 0px;
    border: none;
}

#idDiagramPane div {
    font-size: 12px !important;
}

#idEditViewSwitch {
    padding: 0px;
    margin: 0px;
    border: none;
    width: 100%;
    height: 100%;
}
